<template>
  <div class="not-found-container">
    <h1>404</h1>
    <p>页面未找到</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped lang="scss">
.not-found-container {
  text-align: center;
  padding: 60px 20px;
  
  h1 {
    font-size: 4rem;
    color: $secondary-color;
    margin-bottom: 20px;
  }
  
  p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: $text-light-color;
  }
  
  a {
    color: $primary-color;
    text-decoration: none;
    font-size: $font-size-lg;
    
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>